<template>
  <div id='views'>
    <div class="content">
      <section class="s1">
        <p>
          <span>姓名</span>
          <input type="text" class="right" placeholder="请输入真实姓名" v-model="userName" @input="inputchange()" :disabled="disabled">
        </p>
        <p class="hoverhand" id="showBank" @click="createSel">
          <span>银行</span>
          <span class="right">
            <span>{{selBankName}}</span>
            <img src="../../common/imgs/arrowright.png" alt="箭头" class="arrowright">
          </span>
        </p>
      </section>
      <section class="s2">
        <p class="title">卡号</p>
        <div class="inputdiv">
          <input type="text" v-model="cardNum" placeholder="请输入银行卡号"  @input="inputchange()">
        </div>
        <p class="title">开户行</p>
        <div class="inputdiv">
          <input type="text" v-model="openBank" placeholder="请输入开户行 如：四川成都高新支行"  @input="inputchange()">
        </div>
        <p class="title">手机验证码</p>
        <div class="inputdiv">
          <input type="number" v-model="code" placeholder="请输入验证码" id="code"  @input="inputchange()">
          <tongdun-Countdown wt='2.6rem' hg='0.74rem'  ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60" @run="getCode" @getTdToken="getTdToken"></tongdun-Countdown>
        </div>
        <button :class="btnClass" @click="sub">提交</button>
        <p class="reminder">温馨提示:暂不支持信用卡</p>
      </section>
    </div>
     <dia-log ref="dl" msg="您尚未实名认证,需要立即去实名吗？" @confirm="toRelName()"></dia-log>
  </div>
</template>

<script>
  import { getMbCode2 , addBank  , getBankList , isRelNameVerify } from '../../http/api';
  import '../../common/css/iosselect.css';
  export default {
    name: 'chose_bankcard',
    data() {
      return {
        introduce: '添加银行卡首页',
        selBankId:'',//选择的银行id
        cardNum:'',//银行账号
        openBank:'',//开户行
        userType : 1,//用户类型：1 国内， 其他是海外
        disabled : true,//姓名disabled
        code:'',//验证码
        mobile:this.$store.state.mobile,//手机号
        selBankName:'选择银行',//银行名称
        userName:'',//用户名
        getUserName : '',//ajax拿到的用户姓名
        btnClass : 'submitNot',//按钮背景样式，判断是否允许点击
        banks: '',//银行列表
        yzm_token:'',//同盾验证
      }
    },
    computed : {
      listenChange () {
        return { userName:this.userName , yzm_token:this.yzm_token  , selBankId:this.selBankId  , cardNum:this.cardNum  , openBank :this.openBank , code:this.code  };
      }
    },
    watch:{
      'listenChange' ( val ){
        this.inputchange();
      }
    },
    components:{
      DiaLog: resolve => {require(['../../components/dialog'], resolve)},
      tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    mounted() {
      let Not = { noToast : true , noLoading : true } , thiz = this;
      let https = [
        isRelNameVerify(Not).then( res => {
          if( res.code == 200){
            let data = res.data;
            thiz.userName = data.name;
            thiz.getUserName = data.name;
            let type = data.type;//用户类型
            thiz.userType = type;
            if( type != 1 ){
              thiz.disabled = false;
            }
          }
        }),
        getBankList(Not).then(res => {
          if( res.code == 200 ){
            let data = res.data.lists;
            for( let i in data ){
              data[i].value = data[i].name;
            }
            thiz.banks = data;
          }
        })
      ];
      thiz.loading();
      Promise.all( https ).then(res => {
        thiz.closeLoading();
      })
    },
    methods:{
      inputchange(){
        this.btnClass = this.userName && this.yzm_token && this.selBankId && this.cardNum && this.openBank && this.code ? 'submit' : 'submitNot';
      },
      createSel(){
        let thiz = this;
        if( thiz.banks ){
          let iosSelect = require('../../common/js/iosselect').iosSelect;
          iosSelect( 1 , [thiz.banks], {
            container: '#app',
            title: '银行卡选择',
            itemHeight: 50,
            oneLevelId : thiz.selBankId,//默认选中的
            itemShowCount: 5,
            callback: function ( res ) {
              thiz.selBankName = res.value;
              thiz.selBankId = res.id;
            }
          });
        }
      },
      getTdToken(){
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          thiz.getCode();
        })
      },
      getCode(){
        let thiz = this;
        getMbCode2({yzm_token:thiz.yzm_token,blackBox:thiz.blackBox,token:''}).then(res => {
          if( res.code == 200 ){
            thiz.$refs.tdEle.begin();
            let toast = require('../../common/js/toast').toast;
            toast('验证码已发送至您的手机');
          }else{
            thiz.$refs.tdEle.resetTd();
          }
        })
      },
      toRelName(){
        this.$router.push({path:'/chose_foreign' , query :{ rechargeVerify:true} });
      },
      sub(){
        let toast = require('../../common/js/toast').toast,
          thiz = this;
        if( thiz.getUserName != thiz.userName && thiz.userType == 1){
          toast('国内用户不支持修改姓名！');
        }else if( !thiz.userName ){
          toast('请输入姓名！');
        }else if( !this.yzm_token ){
          toast('请先完成智能验证！');
        }else{
          let params = {
            // user_bank_card_id : thiz.selBankId,
            // currency_code : '',
            smscaptcha : thiz.code,
            id_name : thiz.userName,
            bank_card_no : thiz.cardNum,
            bank_khh_name : thiz.openBank,
            swift_code:'123456',
            bank_name :  thiz.selBankName,
            bank_id : thiz.selBankId,
            noToast : true
          };
          addBank(params).then( res => {
            if( res.code == 200 ){
              toast('添加银行卡成功！');
              thiz.$router.replace({path:'/my_banks_coinsaddress'});
            }else if( res.code == 609 ){
              //未实名，前往实名
              this.$refs.dl.dialogShow();
            } else{
              toast(res.message)
            }
          })
        }
      }
    },
    destroyed(){
      require('../../common/js/iosselect').delSelect();
    }
  }
</script>
<style type="text/less" lang='less' scoped>
  #views{
    padding:0.3rem;text-align: left;font-size: 0.28rem;
    .content{
      background:none;
      >section{background: #fff;padding:0 0.24rem;border-radius: 0.04rem;}
      .s1{
        >p{
          font-size: 0.28rem;padding: 0.35rem 0;
          .right{
            float: right;font-size: 0.28rem;text-align: right;
          }
          input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.28rem;}
          input::-moz-placeholder {color:#AFB2B8;font-size: 0.28rem;}
          input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.28rem;}
          .arrowright{
            font-size: 0;height:0.18rem;margin-left: 0.08rem;;
          }
        }
        >p:first-child{
          border-bottom: 0.01rem solid#E5E5E5;
        }
      }
      .s2{
        margin-top:0.13rem;
        >.title{
          padding-top: 0.38rem;padding-bottom: 0.1rem;
        }
        .inputdiv{
          border-bottom: 0.01rem solid#E5E5E5;position: relative;padding-bottom: 0.01rem;
          >input{
            height:0.74rem;width: 100%;
          }
          input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
          input::-moz-placeholder {color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
          input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.28rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
          input{font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;font-size: 0.28rem;color: #262626}
          #cd_box{
            right:0!important;position:absolute;left:auto;float: right;width:2.6rem;
            /deep/.countDown{
              width: 1.12rem;float: right;height: 0.45rem;font-size: 0.18rem;border-radius: 0.04rem;line-height: 0.45rem;margin-top: 0.16rem;background: #F8D448;;
            }
          }
          #code{
            width:calc( 100% - 2.6rem );
          }
        }
        button{
          height:0.88rem;line-height: 0.88rem;font-size: 0.3rem;margin-top: 0.35rem;
        }
        .reminder{
          color: #5A5A5A;font-size: 0.24rem;padding-top: 0.30rem;padding-bottom: 0.54rem;text-align: center;
        }
      }
    }
  }
</style>
